<template>
	<!-- 	<view class="content">
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userName}}，您已成功登录。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “退出” 可以 “注销当前账户”</view>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>这是 uni-app 带登录模板的示例App首页。</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
	</view> -->

	<view>
		<u-toast ref="uToast"></u-toast>
		<u-swiper :height="250" :list="list" :title="title" :effect3d="effect3d" :indicator-pos="indicatorPos" :mode="mode"
		 :interval="3000" @click="click"></u-swiper>
		<view class="u-config-wrap" v-if="swiperConfigView">
			<view class="u-config-title u-border-bottom">
				轮播图参数配置
			</view>
			<view class="u-config-item">
				<view class="u-item-title">指示器模式</view>
				<u-subsection vibrateShort :list="['round', 'rect', 'number', 'none']" @change="modeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">标题</view>
				<u-subsection vibrateShort current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">指示器位置</view>
				<u-subsection vibrateShort current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">3D效果</view>
				<u-subsection vibrateShort current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection>
			</view>
		</view>

		<view class="content-box">
			<view class="box-content">
				<view class="u-item-title u-line-2">考勤人数</view>
				<view class="u-flex ">
					<view class="u-flex-1 ">
						<view class="u-flex-1  u-padding-10 ">应到:<text>200人</text></view>
						<view class="u-flex-1  u-padding-10 ">实到:<text>158人</text></view>
					</view>
					<view @click="isShowLineConfig=!isShowLineConfig">
						<u-line color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
					</view>
					<view class="u-flex-1 u-row-center" style="padding: 20rpx;">
						<text>我是一个图标</text>
					</view>
				</view>
			</view>
			<view class="u-config-wrap" v-if="isShowLineConfig">
				<view class="u-config-title u-border-bottom">
					分界线参数配置
				</view>
				<view class="u-config-item">
					<view class="u-item-title">颜色</view>
					<u-subsection vibrateShort :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
				</view>
				<view class="u-config-item">
					<view class="u-item-title">细边</view>
					<u-subsection vibrateShort :list="['是', '否']" @change="hairLineChange"></u-subsection>
				</view>
				<view class="u-config-item">
					<view class="u-item-title">方向</view>
					<u-subsection vibrateShort :list="['水平', '垂直']" @change="directionChange"></u-subsection>
				</view>
			</view>
		</view>

		<view class="content-box">
			<view class="u-demo-area">
				<u-grid :col="col" :border="border" @click="itemClick">
					<u-grid-item name="item1" :index="0">
						<u-badge count="9" :offset="[col == 3 ? 20 : 14, col == 3 ? 30 : 20]"></u-badge>
						<u-icon name="plus-people-fill" :size="46"></u-icon>
						<view class="grid-text">实名制录入</view>
					</u-grid-item>
					<u-grid-item :index="1">
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">锁头</view>
					</u-grid-item>
					<u-grid-item :index="2">
						<image src="https://cdn.uviewui.com/uview/grid/hot5.png" :style="{
							top: col == 3 ? '14rpx' : '8rpx',
							right: col == 3 ? '40rpx' : '28rpx'
						}"
						 style="width: 34rpx;height: 34rpx;" class="badge-icon" mode="widthFix"></image>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">沙漏</view>
					</u-grid-item>
					<u-grid-item :index="3">
						<u-icon name="home" :size="46"></u-icon>
						<view class="grid-text">首页</view>
					</u-grid-item>
					<u-grid-item :index="4">
						<u-icon name="star" :size="46"></u-icon>
						<view class="grid-text">星星</view>
					</u-grid-item>
					<u-grid-item :index="5">
						<u-icon name="volume-up" :size="46"></u-icon>
						<view class="grid-text">音量</view>
					</u-grid-item>
					<u-grid-item :index="6">
						<image src="https://cdn.uviewui.com/uview/grid/hot6.png" style="width: 44rpx;height: 44rpx;top:0;right:0;" class="badge-icon"></image>
						<u-icon name="trash" :size="46"></u-icon>
						<view class="grid-text">回收站</view>
					</u-grid-item>
					<u-grid-item :index="7">
						<u-icon name="rewind-right" :size="46"></u-icon>
						<view class="grid-text">快进</view>
					</u-grid-item>
					<u-grid-item :index="8">
						<u-icon name="shopping-cart" :size="46"></u-icon>
						<view class="grid-text">购物车</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				title: false,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: false,
				swiperConfigView: false, //配置轮播图

				// 线条
				direction: 'col',
				hairLine: true,
				length: '50rpx',
				color: this.$u.color['info'],
				isShowLineConfig: false,
				// 线条

				// grid
				border: true,
				col: 3,
				// grid
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		onLoad() {
			if (!this.hasLogin) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},
		methods: {
			titleChange(index) {
				this.title = index == 0 ? true : false;
			},
			modeChange(index) {
				this.mode = index == 0 ? 'round' : index == 1 ? 'rect' : index == 2 ? 'number' : 'none';
			},
			indicatorPosChange(index) {
				this.indicatorPos = index == 0 ? 'topLeft' : index == 1 ? 'topRight' : index == 2 ? 'bottomLeft' : index == 3 ?
					'bottomCenter' : 'bottomRight';
			},
			effect3dChange(index) {
				this.effect3d = index == 0 ? true : false;
			},
			click(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}张图片`,
					type: 'success'
				})
				this.swiperConfigView = !this.swiperConfigView
			},
			// 线条
			colorChange(index) {
				this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]];
			},
			hairLineChange(index) {
				this.hairLine = !index;
			},
			directionChange(index) {
				this.direction = index == 0 ? 'row' : 'col';
				if (index == 0) this.length = '100%';
				else this.length = '50rpx';
			},
			// 线条
			// grid
			itemClick(index) {
				var nextUrl = '';
				switch (index) {
					case 0:
						nextUrl = './realName/realName_add'
						break;

				}
				uni.navigateTo({
					url: nextUrl
				});
			}
			// grid

		}
	}
</script>

<!-- <style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}
</style> -->

<style scoped lang="scss">
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.badge-icon {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
	}

	.swiper {
		height: 480rpx;
	}

	.indicator-dots {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6px;
		width: 6px;
		border-radius: 10px;
		margin: 0 3px;
	}

	.indicator-dots-active {
		background-color: $u-type-primary;
	}
</style>
